<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <!-- react核心组件库 -->
  <script src="../其他/js/react.development.js"></script>
  <script src="../其他/js/react-dom.development.js"></script>
  <!-- Don't use this in production: -->
  <script src="../其他/js/babel.min.js"></script>
  <script type="text/babel">
    class Count extends React.Component {
      // 构造器
      constructor(props) {
        super(props)
        this.state = {count: 0}
      }
      // 加1函数
      add = () => {
        const {count} = this.state
        this.setState({count: count+1})
      }
      // 卸载组件
      death = () => {

          ReactDOM.unmountComponentAtNode(document.getElementById('root'))
        }
      // 强制更新
      force = () => {
          this.forceUpdate()
        }
      // 组件将要挂载的钩子
      componentWillMount() {
        console.log('---componentWillMount')
      }
      // 组件挂载完毕的钩子
      componentDidMount() {
        console.log('---componentDidMount')
      }
      // 控制更新的"阀门"
      shouldComponentUpdate() {
        console.log('---shouldComponentUpdate')
        // 必须有返回值,返回布尔值
        return true
      }
      // 组件将要更新的钩子
      componentWillUpdate() {
        console.log('---componentWillUpdate')
      }
      // 组件更新完毕的钩子
      componentDidUpdate() {
        console.log('---componentDidUpdate')
      }

      render() {
        const {count} = this.state
        return (
          <div>
            <h2>当前的和是: {count}</h2>    
            <button onClick={this.add}>点我+1</button>
            <button onClick={this.death}>组件销毁</button>
            <button onClick={this.force}>强制更新</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Count/>, document.getElementById('root'))

  </script>
</body>
</html>